<template>
  <div class="registered">
    <van-nav-bar title="注册">
      <template #right>
        <div class="login" @click="goLogin">去登录</div>
      </template>
    </van-nav-bar>
    <van-form @submit="setReg" class="text">
      <van-field
        v-model="user.phone"
        name="phone"
        label="手机号"
        placeholder="手机号"
        :rules="[
          { required: true, message: '请填写手机号' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' },
        ]"
      />
      <van-field
        v-model="user.password"
        :type="isRegEye ? 'text' : 'password'"
        name="password"
        label="密码"
        placeholder="密码"
        :right-icon="isRegEye ? 'eye-o' : 'closed-eye'"
        :rules="[
          { required: true, message: '请填写密码' },
          {
            pattern: /^[A-Za-z]\w{5,15}$/,
            message: '支持数字字母下划线组合且须以字母开头',
          },
        ]"
        @click-right-icon="setPasswordStatus('isRegEye')"
      />
      <van-field
        v-model="user.nickName"
        type="text"
        name="nickName"
        label="昵称"
        placeholder="昵称(4-10位)"
        :rules="[
          { required: true, message: '请填写昵称' },
          {
            pattern: /[A-Za-z\u4e00-\u9fa5]{4,10}/,
            message: '支持中英文组合',
          },
        ]"
      />
      <div class="reg-btn">
        <van-button class="btn">注册</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "Registered",
  data() {
    return {
      isRegEye: false,
      user: {
        phone: "",
        password: "",
        nickName: "",
        book: [],
      },
    };
  },
  methods: {
    // onSubmit(values) {
    //   // console.log("submit", values);
    //   console.log(this.user);
    // },
    setReg() {
      let userData = localStorage.getItem("user");
      // console.log(userData);

      if (userData) {
        userData = JSON.parse(userData);
      } else {
        userData = [];
      }
      let isHasUser = false;
      for (let i = 0; i < userData.length; i++) {
        if (userData[i].phone === this.user.phone) {
          Toast("当前手机号存在");
          isHasUser = true;
        }
        break;
      }
      if (!isHasUser) {
        Toast("注册成功,即将跳转到登录页面...");
        userData.push({ ...this.user });
        localStorage.setItem("user", JSON.stringify(userData));
        setTimeout(() => {
          this.$router.push({
            name: "Login",
          });
        }, 3000);
      }
    },

    goLogin() {
      this.$router.push({
        name: "Login",
      });
    },
    setPasswordStatus(key) {
      this[key] = !this[key];
    },
    showRegister() {
      this.show = true;
    },
  },
};
</script>

<style lang="less" scoped>
.registered {
  width: 100%;
  height: 667px;
  background-color: #f4f4f4;
  .text {
    margin-top: 20px;
  }
  .login {
    font-size: 12px;
    color: #ff9db5;
  }
  .reg-btn {
    margin-top: 20px;
    text-align: center;
    .btn {
      width: 300px;
      height: 40px;
      font-size: 14px;
      border-radius: 4px;
      color: #ffffff;
      background-color: #ff9db5;
    }
  }
}
</style>